/**
* @description: 印章使用工单—— 待审批、已撤销、审批拒绝、审批通过详情（班组负责人/班组成员）
* @author: JiWei
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back :title="title" @goBack="goBack"/>
    <!-- banner -->
    <view class="top-banner">
      <view class="left-banner">
       <text class="left-banner-title">{{detailsMsg.ORIGINATOR_NAME}}发起的{{detailsMsg.NAME}}</text>
       <text class="left-banner-time">{{detailsMsg.CREATE_TIME}}</text>
      </view>
      <view :class="stateColor">{{state === '0' ? '待审批' : state === '1' ? '审批拒绝' : state === '2' ? '审批通过' : '已撤销' }}</view>
    </view>
    <!-- main   -->
    <main :class="{'mainHeight':state==='0'}">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />
      <view class="main-top">
        <van-field input-align="right" v-model="detailsMsg.USE_DATE" label="用章日期" readonly error-message-align="right" />
        <van-field input-align="right" v-model="detailsMsg.USE_NUM" label="用印份数" readonly error-message-align="right" />
      </view>
      <view class="remark-info-container">
        <view>用章事由(文件名称)</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <van-field error-message-align="right" readonly type="textarea" class="remark-text" v-model="detailsMsg.ORIGIN_INCIDENT" placeholder="这里是用章事由信息"/>
        </div>
      </view>
      <view class="remark-info-container">
        <view>备注</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <van-field error-message-align="right" readonly type="textarea" class="remark-text" v-model="detailsMsg.REMARKS" placeholder="这里是备注信息"/>
        </div>
      </view>
      <view class="main-top">
        <van-field input-align="right" v-model="detailsMsg.ORIGINATOR_NAME" label="申请人" readonly error-message-align="right" />
        <van-field input-align="right" v-model="detailsMsg.TRUSTEE_NAME" label="经办人" readonly error-message-align="right" />
        <van-field input-align="right" v-model="detailsMsg.APPROVE_NAME" label="审批人" readonly error-message-align="right" />
      </view>
      <plateTitle title="审批进度" :isRequired="false" class="plate-title" />
      <view class="approval-info-container">
        <van-steps direction="vertical"
                   :active="approvalActive"
                   active-color="#417adc"
                   inactive-color="#417adc"
                   active-icon="circle"
                   inactive-icon="circle">
        <van-step v-for="(item,index) in setpList" :key="index">
          <p><span>{{ item.EXECUTION_PERSON_NAME }}</span><span>{{item.EXECUTION_PERSON_ROLE}}</span></p>
          <p style="color: #417adc">{{item.EXECUTION_PERSON_STATR}}</p>
          <p>{{ item.EXECUTION_TIME }}</p>
        </van-step>
        </van-steps>
      </view>
    </main>

    <!-- footer   -->
    <footer v-if="state === '0' && userData.USERID === originationid && prevPage === 'initial' || prevPage === 'workorderpending' " >
      <van-button block native-type="submit" @click="goApproval">{{buttonText}}</van-button>
    </footer>
	<!-- footer   -->
	<footer v-if="state === '4' || state === '1' && userData.USERID === originationid && prevPage == 'initial' || prevPage === 'workorderpending' " >
	  <van-button block native-type="submit" @click="goApprovalAgain">再次提交</van-button>
	</footer>
    <!-- 弹出审批页 -->
    <van-popup
        closeable
        :close-on-click-overlay="false"
        v-model="showApproval"
        position="bottom"
    >
      <toApprove @submitApproval="submitApproval"></toApprove>
    </van-popup>
  </view>
</template>
<script>
import { Dialog } from "vant";
import navBar from "../../../components/common/nav-bar";
import plateTitle from '../common/plateTitle.vue';
import toApprove from '../common/toApprove.vue';
import {mapGetters} from "vuex";
export default {
  name: 'sealDetailsApproval',
  components: { navBar,plateTitle,toApprove},
  props: {},
  data() {
    return {
		id:'',
		setpList:[],
		detailsMsg:{},
		state:'',
		prevPage:'',
		approvalId:'',
		originationid:'',
		showApproval: false, // 展示审批弹窗
		approvalActive: '0',
		approvalData: {},
		approvalColor: () => {
			// if (this.approvalData.approvalState === "发起审批") return "#417ADC";
			if (this.approvalData.approvalState === "1") return "#41DC83"; // 通过
			if (this.approvalData.approvalState === "0") return "#FF4355"; // 审批中
			if (this.approvalData.approvalState === "-1") return "#FFAD0E";// 拒绝
		},
		buttonText:'撤销'
    };
  },
  computed: {
	   ...mapGetters(['userData']),
    title() {
      if(this.state ==='待审批') {
        return '待审批详情'
      }else {
        return '审批通过详情'
      }
    },
    stateColor() {
      if(this.state === '0') {
      	return 'left-state-jj'
      }else if(this.state === '2') {
      	return 'left-state-tg'
      }else if(this.state === '1'){
      	return 'left-state-dsp'
      }else{
		 return 'left-state-ycx'
	  }
    }
  },
  watch: {},
  onLoad(option) {
	this.prevPage = option.pagetype;
  	this.id = option.id;
  	this.getProvincialSealDetailed()
  },
  mounted() {},
  methods: {
    // 返回
    goBack() {
      // uni.navigateTo({
      //   url: '/pages/operationApprove/sealApproval/sealApprovalTeam'
      // })
	  uni.navigateBack()
    },
    // 待审批-按钮
    goApproval() {
      // this.showApproval = true;
	  Dialog.confirm({
	    message:'是否确认撤销？'
	  }).then(()=> {
		 this.cancelSeal();
	  })
    },
	//再次提交操作
	goApprovalAgain(){
		Dialog.confirm({
		  message:'是否确认再次提交？'
		}).then(()=> {
			uni.navigateTo({
				url:`/pages/operationApprove/sealApproval/initiateApplication?id=${this.id}`
			})
		})
	},
	//撤销审批
	cancelSeal(){
		  
		let params = {
			username:this.userData.SUERNAME,
			userId:this.userData.USERID,
			id:this.id
		};
		this.$api.cancelSeal(params).then((res)=>{
			  
			if(res.msg === "撤销成功"){
				uni.navigateTo({
					url:`/pages/operationApprove/index/index`
				})
			}
		})
	},
    //  去审批
    submitApproval() {},
	getProvincialSealDetailed(){
		let params = {
			id:this.id
		}
		this.$api.getProvincialSealDetailed(params).then(res => {
			this.detailsMsg = res.data;
			this.originationid = res.data.ORIGINATOR_ID;
			this.state = this.detailsMsg.STATE
			this.setpList = res.data.approList

			this.approvalActive = res.data.currNode
		})
	},
  }
};
</script>
<style scoped lang="scss">
.task-monitor-main {
  height: 100vh;
  background: #F2F6FA;
  display: flex;
  flex-direction: column;
  .top-banner {
	  flex-shrink: 0;
    width: px2vw(1080);
    height: px2vh(190);
    background: #fff;
    margin-bottom: px2vw(30);
    .left-banner {
      width: px2vw(600);
      margin-top: px2vh(47);
      height: px2vh(98);
      float: left;
      margin-left: px2vh(50);
      .left-banner-title {
        display: block;
        font-size: px2vw(42);
        color: #417ADC;
      }
      .left-banner-time {
        font-size: px2vw(36);
        color: #666;
      }

    }
    .left-state-dsp,
    .left-state-tg,
    .left-state-jj,
	.left-state-ycx{
      width: px2vw(220);
      height: px2vh(80);
      margin-right: px2vh(30);
      margin-top: px2vh(55);
      float: right;
      font-size: px2vw(42);
      font-weight: 700;
      border-radius: px2vw(40);
      text-align: center;
      line-height: px2vh(80);
    }
    .left-state-tg {
      color: #3CDA68;
      background: rgba(62, 218, 104, 0.1);
    }
    .left-state-dsp {
      color: #FF7070;
      background: rgba(255, 112, 112, 0.1);
    }
    .left-state-jj {
      color: #FFAD0E;
      background: rgba(255, 180, 0, 0.1);
    }
	.left-state-ycx {
	  color: #8C8C8C;
	  background: rgba(140,140,140,.1);
	}
  }

  main {
	  flex: 1;

    width: calc(100% - #{px2vw(60)});
    margin:auto;
    // height: calc(100vh - #{px2vh(430)});
    overflow-x: auto;
	 overflow-y: scroll;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .main-top {
      overflow: hidden;
      border-radius: px2vh(20);
      margin-bottom: px2vh(30);
    }
    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);

      .remark-wrap {
        border-radius: px2vw(20);

        .remark-text {
          height: px2vh(150);
        }
      }
    }
    .approval-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;

      /deep/ .van-cell__title {
        color: #666;
      }

      /deep/ .van-cell__value {
        color: #333;
      }
    }
    .approval-info-container {
      .van-steps {
        .van-step.van-step--process {
          /deep/.van-icon::before {
            border-radius: 50%;
            color: #417adc;
            background-color: #417adc;
          }
        }
        .van-step {
          /deep/.van-icon::before {
            border: 2px;
            border-radius: 50%;
            color: #417adc;
            background-color: #fff;
          }
          p {
            margin-bottom: 4px;
            color: #ababab;
          }
          p:nth-child(1) {
            display: flex;
            justify-content: space-between;
            //width: px2vw(300);
            color: #333;
          }
          .opinion {
            display: flex;
            span:nth-child(1) {
              min-width: 70px;
            }
          }
        }
      }
    }
  }
  .mainHeight {
    height: calc(100vh - #{px2vh(590)});
  }
  footer {
	  flex-shrink: 0;
    height: px2vh(155);
    background: #f2f6fa;
    padding-top: px2vh(45);
    /deep/ .van-button {
      width: calc(100% - #{px2vw(60)});
      margin-left: px2vh(30);
      height: px2vh(120);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
  }
}
</style>
